<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <el-button type="primary" @click="dialogVisible = true" plain>上传视频</el-button>
      <el-dialog title="上传视频" :visible.sync="dialogVisible" width="30%">
        <updatevideo v-bind="{closedialog}"></updatevideo>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="dialogVisibleup" width="80%">
        <updateVideoinfo v-bind="{form,closedialog }"></updateVideoinfo>
      </el-dialog>
      <a-modal
        v-model="visible1"
        :destroyOnClose="true"
        :maskClosable="false"
        :centered="true"
        title="Title"
      >
        <videoplay
          v-bind="{PlayAuth: PlayAuth.PlayAuth, VideoId: PlayAuth.VideoId, CoverURL: PlayAuth.VideoId}"
        ></videoplay>
      </a-modal>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="vo.CateName"
          v-for="(vo, io) in getVideoCategories"
          :key="`${io}videos11`"
          :name="`${vo.CateId}`"
        >
          <el-button type="primary" @click="openCateId(vo.CateId)" plain>修改分类名称</el-button>
          <div class="row msg">
            <div class="card" v-for="(v, i) in getVideodata" :key="i" style="width: 320px;">
              <div class="card-img-top" @click="plays(v)">
                <el-image class="img-responsive" :lazy="true" :src="v.CoverURL"></el-image>
              </div>
              <div class="card-body">
                <h6>Title:{{v.Title}}</h6>
                <p class="card-text">描述：{{v.Description}}</p>
                <p class="card-text">标签：{{v.Tags}}</p>
                <p class="card-text">创建时间： {{v.CreateTime}}</p>
                <el-button type="primary" icon="el-icon-edit" @click="upvideo(v)" circle></el-button>
                <el-button
                  type="danger"
                  @click="delvideo({VideoId:v.VideoId})"
                  icon="el-icon-delete"
                  circle
                ></el-button>
                <el-button type="info" circle v-for="video  in v.lession" :key="video.ID">
                  <router-link
                    :to="{name: '课程详情', params: { courseId: video.course_ID }}"
                    v-text="video.name.slice(0,1)"
                    class="text-white"
                  ></router-link>
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </a-layout-content>
  </a-layout>
</template>

<script>
import updateVideoinfo from "@/components/newpublic/updateVideoinfo.vue";
import updatevideo from "@/components/update.vue";
import videoplay from "./videoplay.vue";
import {
  asyncdeleteVideo,
  asyncUpdateCategory,
  asyncGetVideoList,
  asyncGetVideoPlayAuth
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  name: "videos1",
  data() {
    return {
      visible1: false,
      name: "视频库",
      paths: [],
      dialogVisible: false,
      dialogVisibleup: false,
      rows: [],
      form: {},
      activeName: "",
      getVideo: [],
      PlayAuth: {
        PlayAuth: null,
        VideoId: null,
        CoverURL: null
      }
    };
  },
  computed: {
    ...mapGetters(["getVideoCategories", "getCourse"]),
    getVideodata() {
      const { lession, getVideo } = this;
      return getVideo.map(v => {
        const x = lession.filter(vo => vo.videoId == v.VideoId);
        return {
          ...v,
          lession: x
        };
      });
    },
    lession() {
      const { getCourse } = this;
      return getCourse.map(v => {
        const { lession, name } = v;
        const l = lession[0] || [];
        return {
          ...l,
          name
        };
      });
    },
    node_env() {
      return process.env.NODE_ENV === "production";
    }
  },
  watch: {
    async activeName(v) {
      const { VideoList } = await asyncGetVideoList({
        RegionId: "default",
        CateId: v,
        PageNo: 1,
        PageSize: 99
      });
      if (VideoList && VideoList.Video) {
        this.getVideo = VideoList.Video;
      } else {
        this.getVideo = [];
      }
    }
  },
  mounted() {
    this.activeName = "125367547";
  },
  methods: {
    handleClick(v, o) {
      console.log(v, o);
    },
    async delvideo(i) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        try {
          await asyncdeleteVideo(i);
          this.$message({
            message: "删除成功!",
            type: "success"
          });
          this.$store.dispatch("actionVideo");
        } catch (err) {
          this.$message.error(`${err}`);
        }
      });
    },
    closedialog() {
      this.dialogVisibleup = false;
      this.dialogVisible = false;
    },
    upvideo(v) {
      this.form = v;
      this.dialogVisibleup = true;
    },
    async openCateId(v) {
      try {
        const { value } = await this.$prompt("请输入名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        });
        await asyncUpdateCategory({
          CateId: v,
          CateName: value,
          RegionId: "default"
        });
        this.$store.dispatch("actionVideoCategories");
      } catch (err) {
        console.log(err);
        this.$message({
          type: "info",
          message: "取消输入"
        });
      }
    },
    async plays(v) {
      console.log(v);
      const data = await asyncGetVideoPlayAuth({
        VideoId: v.VideoId,
        RegionId: "default"
      });
      try {
        const { PlayAuth } = data;
        this.PlayAuth = {
          PlayAuth,
          VideoId: v.VideoId,
          CoverURL: v.CoverURL
        };
        this.visible1 = true;
      } catch (err) {
        console.log(err);
        this.$message.error("获取失败");
      }
    }
  },
  components: {
    updateVideoinfo,
    updatevideo,
    videoplay
  }
};
</script>

<style scoped>
.aspan {
  cursor: pointer;
  color: blueviolet;
}
.card {
  margin: 15px;
}
.img-responsive {
  width: 100%;
  height: 180px;
  cursor: pointer;
}
</style>